<template>
	<view>
		<van-search @focus="goSearchPage" placeholder="请输入搜索关键词" />
		<view class="flex">
			<van-sidebar v-model="active" @change="clickCate">
				<van-sidebar-item v-for="cate in cates" :title="cate.name" />
			</van-sidebar>
			<view class="goods">
				<van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题"
					thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" origin-price="10.00" />
			</view>

		</view>
	</view>
</template>

<script>
	import cateData from '@/json/cate.json'
	import Storage from '@/utils/storage.js'
	import {
		ref
	} from 'vue';
	export default {
		setup() {
			const value = ref('');
			const active = ref(Storage.get("cateActive") - 0);
			return {
				value,
				active
			};
		},
		data() {
			return {
				cates: [],
				cateCur: 0,
				cateItems: [],
				cateItemCur: 0
			}
		},
		onLoad() {
			this.cates = cateData
		},
		methods: {
			clickCate(index) {
				Storage.set("cateActive", index)
			},
			goSearchPage(){
				uni.navigateTo({
					url:'/pages/goods/search'
				})
			}
		}
	}
</script>

<style>
	.flex {
		justify-content: flex-start;
		width: 700rpx;
		padding: 0 25rpx;
	}
	.flex .goods{
		margin-left: 10rpx;
		flex-grow: 1;
	}
</style>
